<template>
	<view class="page">
		<view class="page-ctx">
			<view class="box-item box-info">
				<view class="info-title">
					商品详情
				</view>
				<view class="products-wrap">
					<view class="product-list">
						<view class="product-item flex" v-for="(product,index) in products" :key="index">
							<view class="poster-box">
								<image :src="product.image" mode="aspectFill"></image>
							</view>
							<view class="info">
								<view class="title-box">
									<view class="title">
										{{product.title}}
									</view>
								</view>
								<view class="desc-box">
									<view class="desc ellipsis-1">
										{{product.keyVals }}
									</view>
								</view>
								<view class="price-box flex-between">
									<view class="price-info">
										<text class="huobi">￥</text>
										<text class="price">{{product.priceSale || 0}}</text>
										<text class="unit" v-if="product.unit">/{{product.unit}}</text>
									</view>
									<text class="num">x {{product.num}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="box-item box-price">
				<div class="mingxi-title">
					价格明细
				</div>

				<view class="mingxi-list">
					<view class="mingxi-item flex-between">
						<view class="label">
							商品总价
						</view>
						<view class="num">
							共{{total_product_number}}件商品
						</view>
						<view class="value">
							￥{{payInfo.goods || 0}}
						</view>
					</view>

					<view class="mingxi-item flex-between">
						<view class="label">
							配送费
						</view>
						<view class="num">
							<!-- 满100免配送费 -->
						</view>
						<view class="value">
							{{order_yunfei ? '￥' + order_yunfei:  '免运费' }}
						</view>
					</view>


					<view class="mingxi-item flex-between" @click="openCouponPop()">
						<view class="label">
							优惠券
						</view>
						<view class="num">

						</view>
						<view class="value flex">
							-￥{{order_coupon_price}}
							<text class="value-text"></text>
							<!-- <image class="arrow" src="@/static/payment/arrow.png" mode=""></image> -->
						</view>
					</view>


					<view class="mingxi-item flex-between" v-if="order_zhekou_bili != 10">
						<view class="label">
							会员折扣
						</view>
						<view class="num">
							<!-- 白银会员 -->
							{{order_zhekou_bili}}折
						</view>
						<view class="value">
							-￥{{order_zhekou_price}}
						</view>
					</view>

					<view class="mingxi-item flex-between">
						<view class="label">
							积分抵扣
						</view>
						<view class="num">
							<!-- 10积分减1元 -->
						</view>
						<view class="value">
							-￥{{order_points_dixian_price || 0}}
						</view>
					</view>

				</view>

				<view class="total-info flex-between">
					<view class="label">
						合计应付
					</view>
					<view class="value">
						￥ {{order_info.price }}
					</view>
				</view>
			</view>


			<view class="box-item box-info">
				<view class="info-title">
					发票信息
				</view>
				<view class="order-content">
					<view class="item">
						<text class="label">发票类型：</text>
						<text class="value">{{invoice_info.invoiceType == 1 ? '普通发票' :'专用发票'}}</text>
					</view>
					<view class="item">
						<text class="label">发票抬头：</text>
						<text class="value">{{invoice_info.titleType == 1 ? '个人' :'公司'}}</text>
					</view>
					<view class="item" v-if='invoice_info["title"]'>
						<text class="label">单位名称：</text>
						<text class="value">{{invoice_info["title"]}}</text>
					</view>
					<view class="item" v-if='invoice_info["shibiema"]'>
						<text class="label">纳税人识别号：</text>
						<text class="value">{{invoice_info["shibiema"]}}</text>
					</view>
					<view class="item" v-if='invoice_info["companyAddress"]'>
						<text class="label">注册地址：</text>
						<text class="value">{{invoice_info["companyAddress"]}}</text>
					</view>
					<view class="item" v-if='invoice_info["companyPhone"]'>
						<text class="label">注册电话：</text>
						<text class="value">{{invoice_info["companyPhone"]}}</text>
					</view>
					<view class="item" v-if='invoice_info["bankName"]'>
						<text class="label">开户银行：</text>
						<text class="value">{{invoice_info["bankName"]}}</text>
					</view>
					<view class="item" v-if='invoice_info["bankNo"]'>
						<text class="label">银行账户：</text>
						<text class="value">{{invoice_info["bankNo"]}}</text>
					</view>
				</view>
			</view>

			<view class="box-item box-info">
				<view class="info-title">
					开票信息
				</view>
				<view class="order-content">
					<view class="item">
						<text class="label">开票状态：</text>
						<text class="value"
							:class="[invoice_info.invoiceUrl ? 'succ' :'warn']">{{invoice_info.invoiceUrl ? '已开票' :'未开票'}}</text>
					</view>
					<view class="item" style="display: block;" v-if="invoice_info.invoiceUrl && fapiao_is_image">
						<view class="label">发票附件：</view>
						<view class="value">
							<view class="pic-wrap">
								<view class="pic-box" @click="doPreviewImage()">
									<image class="fapiao-image" :src="invoice_info.invoiceUrl" mode="aspectFit"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>


		<w_bottom_safe height="160" />


		<view class="page-foot" v-if="invoice_info['invoiceUrl'] && !fapiao_is_image">
			<view class="safe-fixed-bottom">
				<view class="btns flex-between">
					<view class="btn flex-center btn-pay" @click="doDownload()">
						下载发票
					</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				is_test_hexiao: true, // 测试被核销
				invoiceId: '',
				orderId: '',
				info: {},
				invoice_info: {},
				order_info: {},
				payInfo: {},
				//
				products: [],
				total_product_number: 0,
				total_product_price: 0,
				order_yunfei: 0,
				order_zhekou_bili: 10, //打几折
				order_zhekou_price: 0,
				order_coupon_price: 0,
				total_order_price: 0, //合计订单金额


				order_points_dixian_price: 0,
				
				fapiao_is_image: true
			}
		},
		computed: {


		},
		onLoad(option) {
			this.invoiceId = option.invoiceId;
			this.orderId = option.orderId;
			this.setView();
		},
		onShow() {

		},
		onHide() {},
		methods: {
			setView() {
				this.query_order();
				this.query_invoice();
			},
			query_invoice() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'invoices_detail',
						id: this.invoiceId
					},
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.info = data;
						this.invoice_info = data;
						this.products = JSON.parse(data.info)

						this.fapiao_is_image = this.isImageUrl(data.invoiceUrl || '')
					}
				})
			},

			query_order() {
				this.$api({
					url: '/service.php',
					method: 'get',
					data: {
						action: 'orders_detail',
						id: this.orderId
					},
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.order_info = data;
						this.payInfo = data.payInfo;

						this.products = data.products;
						this.products.forEach((v) => {
							this.total_product_number += parseInt(v.num)
						})
					}
				})
			},




			isImageUrl(url = '') {
				// 定义一个包含图片扩展名的数组  
				const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'];

				// 获取URL的最后一个部分（通常是文件名），然后检查其扩展名是否在数组中  
				const extension = url.split('.').pop().toLowerCase();
				return imageExtensions.includes(extension);
			},


			isPdfUrl(url) {
				// 定义一个包含图片扩展名的数组  
				const imageExtensions = ['pdf'];

				// 获取URL的最后一个部分（通常是文件名），然后检查其扩展名是否在数组中  
				const extension = url.split('.').pop().toLowerCase();
				return imageExtensions.includes(extension);
			},


			doPreviewImage() {
				uni.previewImage({
					urls: [this.invoice_info.invoiceUrl],
				});
			},



			doDownload() {

				uni.showLoading({
					title: '下载中...'
				})
				uni.downloadFile({
					url: this.invoice_info['invoiceUrl'],
					//filePath: wx.env.USER_DATA_PATH + '/' + item.channelId + '.'+file_type, 
					success: (res) => {
						console.log('downloadFile 下载文件', res)
						var filePath = res.tempFilePath;


						if (this.fapiao_is_image) {

						} else {
							uni.openDocument({
								filePath: filePath,
								showMenu: true,
								success: function(res) {
									uni.hideLoading()
									console.log('openDocument 打开文档成功 res', res);
								},
								fail: function(res) {
									uni.hideLoading()
								}
							});
						}
					}
				});

				/* uni.downloadFile({
					url: this.info.fapiao_image,
					success: (res) => {
						if (res.statusCode === 200) {
							this.$alert('下载成功')
						}
					}
				}) */
			},

		}
	}
</script>




<style lang="scss">
	page {
		background: #F8F8F8;
	}
</style>

<style lang="scss" scoped>
	.page-ctx {
		padding: 24rpx 32rpx;
	}

	.box-item {
		margin-bottom: 24rpx;
		padding: 32rpx 24rpx;
		background: #FFFFFF;
		// box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.box-status {
		.info-box {
			flex: 1;
			overflow: hidden;


			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}

			.tip {
				margin-top: 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 20rpx;
				color: #B3B9C9;

				.tip-item {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 20rpx;
					color: #B3B9C9;
				}
			}
		}

		.icon-box {
			width: 72rpx;
			height: 72rpx;

			image {
				width: 72rpx;
				height: 72rpx;
			}
		}
	}




	.products-wrap {
		padding: 0 0;

		.product-list {
			.product-item {
				padding: 32rpx 0;
				align-items: flex-start;

				&+.product-item {
					border-top: 1rpx solid #eee;
				}

				.poster-box {
					width: 176rpx;
					height: 176rpx;
					border-radius: 8rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.info {
					flex: 1;
					overflow: hidden;
					padding-left: 32rpx;



					.title-box {}

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 28rpx;
						color: #222222;
						line-height: 1.5;
					}

					.desc-box {
						margin-top: 14rpx;

						.desc {
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #B3B9C9;
						}
					}


					.price-box {
						margin-top: 24rpx;

						.price-info {
							.huobi {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 20rpx;
								color: #000000;
							}

							.price {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 36rpx;
								color: #000000;
							}

							.unit {
								font-family: PingFang SC, PingFang SC;
								font-weight: bold;
								font-size: 20rpx;
								color: #000000;
							}
						}

						.num {
							font-family: PingFang SC, PingFang SC;
							font-weight: bold;
							font-size: 24rpx;
							color: #000000;
						}

					}
				}
			}

		}

	}




	// 产品评价
	.product-reviews-box {
		margin-top: 24rpx;
		display: flex;
		justify-content: flex-end;

		.btns {
			flex: 1;
			display: flex;
			justify-content: flex-end;
			overflow: hidden;
			flex-wrap: wrap;

			.btn {
				margin-left: 20rpx;
				min-width: 136rpx;
				height: 48rpx;
				background: #F4F4F4;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;

				&.btn-reviews {
					background: #CB0011;
					color: #FFFFFF;
				}
			}
		}
	}








	.cell-item {
		height: 108rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		&+.cell-item {
			border-top: 1rpx solid #EAEAEA;
		}

		.label {
			padding-right: 24rpx;
			flex: 1;
			overflow: hidden;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #333333;

			image {
				margin-right: 10rpx;
				width: 48rpx;
				height: 48rpx;
				border-radius: 8rpx;
			}

			text {
				flex: 1;
				overflow: hidden;
			}
		}

		.value-box {
			width: fit-content;

			.value {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #7D7D7D;

				&.right-padding {
					margin-right: 10rpx;
				}
			}

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}



	.box-price {
		margin-top: 24rpx;

		.mingxi-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.mingxi-list {}

		.mingxi-item {
			margin-top: 20rpx;

			.label {
				width: 160rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;
			}

			.num {
				flex: 1;
				text-align: left;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #B3B9C9;
			}

			.value {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #222222;
			}
		}

		.total-info {
			border-top: 1rpx solid #F8F8F8;
			margin-top: 32rpx;
			padding-top: 32rpx;

			.label {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 28rpx;
				color: #222222;
			}

			.value {
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 28rpx;
				color: #000000;
			}
		}

	}





	.box-pay {
		padding: 24rpx 24rpx;

		.pay-info {
			.label {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #222222;
			}

			.value {

				image {
					margin-right: 24rpx;
					width: 40rpx;
					height: 40rpx;
				}

				text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
				}
			}
		}
	}

	.box-info {
		.info-title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #222222;
		}

		.order-content {
			margin-top: 20rpx;

			.item {
				display: flex;
				justify-content: space-between;

				&+.item {
					margin-top: 22rpx;
				}

				.label {
					display: inline-block;
					min-width: 5em;
					font-family: PingFang SC, PingFang SC;
					font-weight: bold;
					font-size: 24rpx;
					color: #222222;
				}

				.value {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #222222;
				}
			}
		}
	}





	// 快递信息
	.express-reason {
		margin-top: 10rpx;
		font-size: 24rpx;
	}





	.pic-wrap {
		.pic-box {
			.fapiao-image {
				width: 400rpx;
				height: 400rpx;
			}
		}
	}




	.page-foot {

		.btns {
			width: 100%;

			.btn {
				flex: 1;
				// width: 345rpx;
				height: 80rpx;
				border-radius: 58rpx 58rpx 58rpx 58rpx;
				border: 2rpx solid #EFF1F6;
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;


				&+.btn {
					margin-left: 24rpx;
				}

				&.btn-pay {
					background: #CB0011;
					color: #FFFFFF;
				}


				&.btn-cancel {}

				&.btn-refund {}

				&.btn-disabled {}

				&[disabled] {}


			}
		}

	}
</style>